<template>
	<div>
		<el-form ref="form" :model="form" label-width="100px">
			  <el-form-item label="名称" class="form">
			    <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
			  </el-form-item>
			  <el-form-item label="简介" class="form">
			    <el-input v-model="form.short_name" placeholder="请输入简介"></el-input>
			  </el-form-item>
			  <el-form-item label="价格" class="form">
			    <el-input v-model="form.price" placeholder=""></el-input>
			  </el-form-item>
			  <el-form-item label="标签" class="form">
			    <el-tag
			      :key="index"
			      v-for="(item,index) in form.label"
			      closable
			      :disable-transitions="false"
			      @close="handleClose(index)">
			      {{item}}
			    </el-tag>
				<el-input
				  class="input-new-tag"
				  v-if="inputVisible"
				  v-model="inputValue"
				  ref="saveTagInput"
				  size="small"
				  @keyup.enter.native="handleInputConfirm"
				  @blur="handleInputConfirm"
				>
				</el-input>
				<el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
			  </el-form-item>
			  
			  <el-form-item label="类型">
			  	<el-select v-model="form.type" placeholder="请选择类型">
			  	    <el-option
			  	      v-for="item in house_type"
			  	      :key="item.id"
			  	      :label="item.name"
			  	      :value="item.id">
			  	    </el-option>
			  	  </el-select>
			  </el-form-item>
			  
			  <el-form-item label="区域">
			  	<el-select v-model="form.region" placeholder="请选择区域">
			  	    <el-option
			  	      v-for="item in region"
			  	      :key="item.id"
			  	      :label="item.name"
			  	      :value="item.id">
			  	    </el-option>
			  	  </el-select>
			  </el-form-item>
			  
			  <el-form-item label="周边环境">
			  	<el-select v-model="form.around" placeholder="请选择" multiple>
			  	    <el-option
			  	      v-for="item in around"
			  	      :key="item.id"
			  	      :label="item.name"
			  	      :value="item.id">
			  	    </el-option>
			  	  </el-select>
			  </el-form-item>
			  
			  <el-form-item label="项目顾问">
			  	<el-select v-model="form.adviser" placeholder="请选择" multiple>
			  	    <el-option
			  	      v-for="item in adviser"
			  	      :key="item.id"
			  	      :label="item.name"
			  	      :value="item.id">
			  	    </el-option>
			  	  </el-select>
			  </el-form-item>
			  
			  <el-form-item label="封面" class="banners">
			  	<Pic :url="form.icon" index="icon" @get_url="get_icon" @delImg="del_icon"></Pic>
			  </el-form-item>
			  
			  <el-form-item label="背景" class="banners">
			  	<Pic :url="form.background" index="background" @get_url="get_back" @delImg="del_back"></Pic>
			  </el-form-item>
			  
			  <el-form-item label="轮播图" class="banners">
			    <Pic v-for="(item,index) in form.banners" :key="index" :url="item" :index="index" @delImg="del_banner"></Pic>
				<Pic url="" index="banners" @get_url="get_banners"></Pic>
			  </el-form-item>
			  
			  <el-form-item label="广告位" class="banners">
			  	<Pic :url="form.advertisement" index="advertisement" @get_url="get_back" @delImg="del_back"></Pic>
			  </el-form-item>
			  
			  <el-form-item label="联系电话" class="form">
			    <el-input v-model="form.phone" placeholder=""></el-input>
			  </el-form-item>
			  
			  <el-form-item label="售楼地址" class="form">
			    <el-input v-model="form.sale_address" placeholder=""></el-input>
			  </el-form-item>
			  
			  <el-form-item label="联系地址" class="form">
			    <el-input v-model="form.address" placeholder=""></el-input>
			  </el-form-item>
			  
			  <el-form-item label="说明" class="form">
			    <el-input v-model="form.descript" placeholder="" type="textarea"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="面积" class="form">
			    <el-input v-model="form.area" placeholder=""></el-input>
			  </el-form-item>
			  
			  <el-form-item label="排序" class="form">
			    <el-input v-model="form.sort" placeholder="" type="number"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="状态" class="form">
			     <el-radio-group v-model="form.state">
			        <el-radio :label="0">下架</el-radio>
			        <el-radio :label="1">在售</el-radio>
			        <el-radio :label="2">已售出</el-radio>
			      </el-radio-group>
			  </el-form-item>
			  <el-form-item label="坐标">
			  	<el-input v-model="form.lng+','+form.lat"></el-input>
			  </el-form-item>
			  <el-form-item label="地图">
			  	 <Amap :position="[form.lng||105.30504,form.lat||27.29847]" :center="[form.lng||105.30504,form.lat||27.29847]" zoom="18" :icon="icon" :choose_position="get_position"></Amap>
			  </el-form-item>
			  
			  <el-form-item label="区域介绍">
			  	<Edit :contents="form.content" :content_back="get_content"></Edit>
			  </el-form-item>
			  
		</el-form>
		  <el-button type="primary" @click="sub()">提交</el-button>
		  <el-button type="primary" @click="back_url()">返回</el-button>
	</div>
</template>

<script>
	import Pic from '../../components/UploadPicOne.vue'
	import Amap from '../../components/amap.vue'
	import Edit from '../../components/quill-editor.vue'
	export default {
		components:{
			Pic,
			Amap,
			Edit
		},
		data(){
			return{
				form:{
					name:'',
					short_name:'',
					banners:[],
					around:[],
					label:[],
					price:'',
					address:'',
					sale_address:'',
					phone:'',
					descript:'',
					icon:'',
					content:'',
					lat:'',
					lng:'',
					area:'',
					state:0,
					sort:0,
					region:'',
					type:'',
					background:'',
					advertisement:'',
					adviser:[],
				},
				region:[],
				house_type:[],
				around:[],
				adviser:[],
				icon:this.$get_img+'public/sys/icon/position.png',
				inputVisible: false,
				inputValue: '',
				edit_type:0,//0添加1编辑
			}
		},
		mounted() {
			this.get_region()
			this.get_house_type()
			this.get_around()
			this.get_adviser()
			let data=JSON.parse(localStorage.getItem('edit_produce'));
			if(data)
			{
				this.edit_type=1
				this.form=data
				localStorage.removeItem('edit_produce')
			}
			
			let copy=JSON.parse(localStorage.getItem('copy_projuce'));
			if(copy){
				this.form.copy
				this.edit_type=0
				localStorage.removeItem('copy_projuce')
			}
			
		},
		methods:{
			get_adviser(){
				this.$model.get("/cms/adviser/get_all").then(res=>{
					this.adviser=res.data
				})
			},
			get_around(){
				this.$model.get("/cms/house_area/get_all").then(res=>{
					if(res.code==200){
						this.around=res.data
					}
				})
			},
			get_back(e){
				this.form.background=e.url
			},
			del_back(e){
				this.form.background=""
			},
			del_icon(e){
				this.form.icon=""
			},
			sub(){
				this.form.sort=parseInt(this.form.sort)
				if(this.edit_type==0){
					this.$model.post("/cms/house/create",this.form).then(res=>{
						if(res.code==200){
							this.$message({
							         message: '添加成功',
							         type: 'success'
							       });
						this.back_url()
						}
					})
				}else{
					this.$model.post("/cms/house/update",this.form).then(res=>{
						if(res.code==200){
							this.$message({
							         message: '更新成功',
							         type: 'success'
							       });
						this.back_url()
						}
					})
				}
			},
			get_house_type(){
				this.$model.get("/cms/house_type/get_all").then(res=>{
					this.house_type=res.data
				})
			},
			get_region(){
				this.$model.get("/cms/region/get_all").then(res=>{
					this.region=res.data
				})
			},
			handleClose(index) {
				this.form.label.splice(index,1)
			},
			get_content(e){
				this.form.content=e
			},
			del_banner(index){
				this.form.banners.splice(index,1)
				
			
			},
			get_position(e){
					this.form.lng=e[0]
					this.form.lat=e[1]
			},
			get_banners(e){
				this.form.banners.push(e.url)
			},
			get_icon(e){
				this.form.icon=e.url
			},
			  handleInputConfirm() {
			        let inputValue = this.inputValue;
			        if (inputValue) {
			          this.form.label.push(inputValue);
			        }
			        this.inputVisible = false;
			        this.inputValue = '';
			},
			 showInput() {
			        this.inputVisible = true;
			        this.$nextTick(_ => {
			          this.$refs.saveTagInput.$refs.input.focus();
			        });
			}
		}
	}
</script>

<style>
	.form{
		width: 800px;
	}
	 .el-tag + .el-tag {
	    margin-left: 10px;
	  }
	  .button-new-tag {
	    margin-left: 10px;
	    height: 32px;
	    line-height: 30px;
	    padding-top: 0;
	    padding-bottom: 0;
	  }
	  .input-new-tag {
	    width: 90px;
	    margin-left: 10px;
	    vertical-align: bottom;
	  }
	  
	  .banners{
		  width: 600px;
	  }
</style>
